<template>
  <div class="ward-info" v-show="showInfo">
    <div class="info-container" :style="{ width: popupWidth + 'vw' }" @click.stop>
      <div class="title">
        {{ title }} <span class="next" @click="handleNextWard"></span>
      </div>
      <div class="content" :style="{ display: flag === 0 ? 'grid' : '' }">
        <slot></slot>
      </div>
      <div class="operate">
        <button
          @click="handleChange(0)"
          class="base"
          :class="isActive ? 'active' : 'de-active'"
        >
          基础信息
        </button>
        <button
          @click="handleChange(1)"
          class="query"
          :class="!isActive ? 'active' : 'de-active'"
        >
          查房信息
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
  showInfo: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    required: true,
  },
  popupWidth: {
    type: Number,
    default: 30,
  },
});

let isActive = ref(true); //点击添加高亮样式的标识
let flag = ref(0); //基本信息和查房信息的切换标识 0：基本信息 1：查房信息
const emits = defineEmits(["changeFlag", "nextWard"]);

//基本信息和查房信息切换
function handleChange(val) {
  if (flag.value === val) return;
  isActive.value = !isActive.value;
  flag.value = val;
  emits("changeFlag", flag.value);
}

function handleNextWard() {
  emits("nextWard");
}
</script>

<style lang="scss" scoped>
.ward-info {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba($color: #000000, $alpha: 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  .info-container {
    min-height: 80vh;
    max-height: 80vh;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .title {
      min-height: 5vh;
      font-size: 1vw;
      color: #619dfb;
      height: 5vh;
      border-bottom: 2px solid #ececec;
      display: flex;
      justify-content: center;
      align-items: center;
      .next {
        display: inline-block;
        width: 0;
        height: 0;
        border-left: 0.4vw solid #619dfb;
        border-right: 0.4vw solid transparent;
        border-top: 0.4vw solid transparent;
        border-bottom: 0.4vw solid transparent;
        margin-left: 0.4vw;
        cursor: pointer;
      }
    }
    .content {
      flex: 1;
      grid-template-columns: repeat(3, 1fr);
      gap: 1vw 2vw;
      padding: 1vh 1vw;
      overflow-y: auto;
      /* 隐藏默认的滚动条样式 */
      scrollbar-width: none; /* Firefox */
      -ms-overflow-style: none; /* IE and Edge */
      :deep(.el-table) {
        margin-top: 1.1rem;
        th.el-table__cell.is-leaf {
          background: #f6f6f6;
        }
        .el-table__row {
          background: #e1edfa;
        }
      }
    }
    .content::-webkit-scrollbar {
      display: none; /* Chrome, Safari, and Opera */
    }
    .operate {
      margin: 1vh 0;
      text-align: center;
      button {
        width: 6vw;
        height: 3vh;
        border-radius: 20px;
        box-shadow: 0px 0px 10px #fff;
      }
      .base {
        margin-right: 1vw;
      }
      .query {
        margin-left: 1vw;
      }
    }
    .active {
      background: linear-gradient(to right, #62a8fa, #a7e6ff, #61a9fd);
      color: #fff;
    }
    .de-active {
      background: linear-gradient(to right, #e2f2fd, #a7e6ff, #e1f2fd);
      color: #333333;
    }
  }
}
</style>
